import { useEffect,useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Button } from 'antd'
let mediaRecorder =null
let soundData = null
function App() {
  // const [mediaRecorder, setMediaRecorder] = useState(null);
  
  // const [soundData, setSoundData] = useState(null);
  
  useEffect(() => {
    async function init () {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      console.log("看看这里面是个啥啊", stream);
      mediaRecorder = new MediaRecorder(stream);
      console.log("看看这里面又是个啥啊", mediaRecorder);
      mediaRecorder.ondataavailable = (e) => {
        console.log("数据到了", e);
        soundData = e.data
        // setSoundData(e.data);
        // chunks.push(e.data);
      };
    }
    init()
    // console.log("我的天");
    return () => {

    }
  })

  const startRecord=async () => {
    
    mediaRecorder.start()
    
  }

  const stopRecord=async () => {
    mediaRecorder.stop();
    const data = await window.showSaveFilePicker({
      types: [{
        description: "audio",
        accept: {
          'audio/webm':['.webm'],
        }
      },]
    })
    console.log("试试看", data);
    const writeable = await data.createWritable();
    console.log("想写个啥",soundData)
    await writeable.write(soundData);
    console.log("可写值", writeable);
    writeable.close()
  }

  return (
    <>
      <Button onClick={startRecord}>开始录音</Button>
      <Button onClick={stopRecord}>结束录音</Button>
      {mediaRecorder?.state}
    </>
  )
}

export default App
